import React, { Component } from 'react';
import { message } from 'antd';
import 'ol/ol.css';
import { Map, View } from 'ol';/* 创建map */
import XYZ from 'ol/source/XYZ'; /* 使用XYZ地图 */
import { Tile as TileLayer } from 'ol/layer.js'; /* 矢量图层数据，样式整合 */
import { Select, Modify } from 'ol/interaction.js';
import Atdmine from '../api/atdmine';
import mapinfo from '../api/mapinfo';
import MyOlHeader from '../components/myOlHeader';
import MyOlPopup from '../components/myOlpopup';
import './css/ol.css'
class Index extends Component {
    constructor(props) {
        super(props)
        this.state = {
            map: '',
            selectFeature: '',/* feature矢量选中项 */
            popupIdx: 1,/* 弹框选中项 */
            drawType: 'none',/* 绘画类型 */
            popupShow: false,
            myPopup: {
                title: '新增',
                baseShow: false,
                iconShow: false,
                formInfo: '',
            }
        }
    }
    componentDidMount() {
        /* 渲染默认信息谷歌地图 */
        this.selectMap();
    }
    selectMap = () => {
        var linestyle1 = { width: 4, color: '#FF0000', type: 'hight' } /* 高压 */
        var layersPoint = mapinfo.layersPoint('');    /* 点的集合 */
        var layersLine = mapinfo.layersLine(linestyle1);      /* 线条的集合 */
        var mlayer = new TileLayer({ preload: 4, source: new XYZ({ url: 'http://www.google.cn/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i345013117!3m8!2szh-CN!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0' }) })
        var mapView = new View({ center: [119.987473, 30.278719], projection: 'EPSG:4326',/* 指定投影使用EPSG:4326 */zoom: 14 })
        // 渲染地图
        var map = new Map({
            layers: [mlayer, layersPoint, layersLine],
            target: 'map',
            view: mapView,
            loadTilesWhileAnimating: true,
        });
        this.setState({ map: map, layersPoint: layersPoint, layersLine: layersLine })
        /* 事件处理 */
        this.mapSelect(map)/* 选中事件 */
        this.mapClick(map)/* 点击事件 */
        map.on('pointermove', function (evt) {
            map.getTargetElement().style.cursor =
                map.hasFeatureAtPixel(evt.pixel) ? 'pointer' : '';
        });
    }
    /* 页面头部组件返回 */
    myHeaderBack = (isShow, drawType, info) => {
        this.setState({
            popupShow: isShow,
            myPopup: Object.assign({}, this.state.myPopup, { formInfo: info }),
            drawType: drawType
        });
        this.updateSource()
    }
    /* 弹框组件返回 */
    myPopupBack = (type, info) => {
        let myPopupInfo = { baseShow: true, iconShow: false }
        if (type === 'close') {
            myPopupInfo.baseShow = false;
        } else if (type === 'updata') {
            myPopupInfo.formInfo = info;
        } else if (type === 'edit') {
            this.setState({ popupIdx: info })
        }
        this.updateSource()
        this.setState({
            popupShow: myPopupInfo.baseShow,
            myPopup: Object.assign({}, this.state.myPopup, myPopupInfo),
        });
    }
    /* 选中 */
    mapSelect = (mapEvent) => {
        var selectSingleClick = new Select();
        mapEvent.addInteraction(selectSingleClick);
        this.setState({ selectFeature: selectSingleClick })
        /*获取到选中的信息*/
        selectSingleClick.on('select', (e) => {
            var features = e.target.getFeatures().getArray();
            if (features.length > 0 && this.state.drawType === 'update') {
                var property = features[0].getProperties();
                /* 判断当前修改的状态 */
                if (this.state.popupIdx === 2) {
                    console.log('拖动')
                } else if (this.state.popupIdx === 3) {
                    /* 进行编辑 */
                    var list = JSON.parse(localStorage.getItem('featureList'))||[];
                    let info = list.find(function (item) {
                        return item.id === property.id
                    })
                    this.refs.myPopup.upFormInfo(info)
                } else if (this.state.popupIdx === 4) {
                    /* 进行删除选中项 */
                    this.delectFeature(property.id)
                } else if (this.state.popupIdx === 1) {
                    console.log(property)
                    var modify = new Modify({
                        features: e.target.getFeatures(),
                        condition: modifyBack()
                    });
                    mapEvent.addInteraction(modify);
                    function modifyBack(e) {
                        console.log(e)
                    }
                }
            }
        })
    }
    /* 取消选中 */
    unSelect() {
        this.state.selectFeature.getFeatures().clear();
    }
    /* 点击事件 */
    mapClick = (map) => {
        map.on('click', (e) => {

        })
    }
    /* 通过id查询数据 */
    selectInfo(id) {
        var list = JSON.parse(localStorage.getItem('featureList'))
        var obj = list.findIndex(function (obj) {
            return obj.id === id
        })
        list[obj].idx = obj
        return list[obj]
    }
    /* 弹框编辑事项修改 */
    popupEdit = (info, event) => {
        event.preventDefault();
        this.setState({ popupIdx: info })
        this.unSelect()
    }
    /* 删除本地缓存数据 */
    delectFeature = (id) => {
        Atdmine.delect().then((res) => {
            if (res === 'yes') {
                var list = JSON.parse(localStorage.getItem('featureList'))
                /* 根据id删除本地数据 */
                list = list.filter(item => item.id !== id)
                localStorage.setItem('featureList', JSON.stringify(list));
                /* 删除成功更新矢量图层 */
                this.updateSource()
                message.success('成功删除')
                /* 取消选中状态 */
                this.unSelect()
            }
        })
    }
    /* 更新页面矢量图 */
    updateSource = () => {
        this.state.layersPoint.setSource(mapinfo.sourceInfo('Point'))
        this.state.layersLine.setSource(mapinfo.sourceInfo('LineString'))
    }
    render() {
        return (
            <div style={{ width: '100%', height: '100%' }}>
                <div id='map' className='map' style={{ width: '100%', height: '100%' }}></div>
                <MyOlHeader map={this.state.map} HeaderBack={this.myHeaderBack}></MyOlHeader>
                {this.state.popupShow && <MyOlPopup ref='myPopup' drawType={this.state.drawType} myPopup={this.state.myPopup} PopupBack={this.myPopupBack}></MyOlPopup>}
            </div>
        )
    }
}
export default Index;